<template>
  <el-dialog title="新增角色" width="40%" @close="handleClose" draggable>
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色名称：">
            <el-input v-model="form.createdBy" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：">
            <el-date-picker
                type="datetime"
                placeholder="选择日期"
                v-model="form.createdTime"
                :disabled-date="disabledDate"

            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色描述：">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="text" @click="handleReset">重 置</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import {ref, defineEmits,defineProps,onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {ElMessage} from "element-plus";

const route = useRoute()
// 定义表单数据
const form = ref({
  createdBy: '',
  createdTime: '',
  description: ''
})
// 定义表单ref
const formRef = ref(null)
// 定义接收的属性
const props = defineProps(['role'])
const emits = defineEmits(['close'])


const handleClose = () => {
  emits('close')
}
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7 // 86400000 ms = 1 day 今天及以后的时间是可选的
}

const handleSubmit = () => {
  if (form.value.createdBy && form.value.createdTime && form.value.description) {
    ElMessage.success('提交成功')
    form.value = {
      createdBy: '',
      createdTime: '',
      description: ''
    }
    emits('close')
  } else {
    ElMessage.error('请填写完整信息')
  }

}
// 重置表单
const handleReset = () => {
  form.value = {
    name: '',
    createTime: '',
    description: ''
  }
}

// 监听组件加载完成
onMounted(() => {
  if (route.query.type === 'edit') {
    form.value = props.role
  }
  if (route.query.type === 'add') {
    handleReset()
  }
})

</script>


<style scoped>

</style>